<template>
    <div>
        <el-button text :icon="Plus" type="success" @click="handleAddCmpnt">添加组件</el-button>
        <el-dialog title="选择组件" v-model="dialogVisible" width="80%" top="5%" :draggable="true"
            :close-on-click-modal="false" append-to-body @click.stop>
            <div @click.stop class="dialog-content" v-if="!showDb">
                <el-row class="w-100 h-100">
                    <el-col :span="2" class="h-100">
                        <el-tabs :tab-position="'left'" v-model="activeTab" @tab-change="tabChange" :stretch="true"
                            class="w-100 h-100 tabs-container">
                            <el-tab-pane label="小组件" :name="'widget'" />
                            <el-tab-pane label="容器" :name="'container'" />
                        </el-tabs>
                    </el-col>

                    <el-col :span="22">
                        <div class="row ps-5 border-no">
                            <div v-for="(cmpnt, index) in cmpnts" :key="index"
                                class="col-2 m-1 d-flex border rounded flex-column align-items-center justify-content-center component-item position-relative"
                                @mouseenter="showButton(index)" @mouseleave="hideButton(index)">
                                <i :class="cmpnt.ctl.icon" class="fs-4 mb-2"></i>
                                <span class="text-center">{{ cmpnt.ctl.text }}</span>

                                <!-- 浮动按钮 -->
                                <span v-if="hoverIndex === index"
                                    class="position-absolute top-0 start-0 w-100 h-100 bg-light bg-opacity-100 d-flex align-items-center justify-content-center">
                                    <el-button class="w-50" type="primary" size="small"
                                        @click="handleComponentClick(cmpnt)">使用
                                    </el-button>
                                </span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div @click.stop class="dialog-content" v-if="showDb">
                <div @click="showDb = false" class="mb-4">
                    <el-button text :icon="Back" type="primary" @click="showDb = false">返回</el-button>
                </div>


                <div class="row ps-5 border-no">
                    <div v-for="(table, index) in tables" :key="index"
                        class="col-2 m-1 d-flex border rounded flex-column align-items-center justify-content-center component-item position-relative"
                        @mouseenter="showButton(index)" @mouseleave="hideButton(index)">
                        <span class="text-center fw-bold">{{ table.title }}</span>
                        <span class="text-center text-black-50">{{ table.description }}</span>
                        <!-- 浮动按钮 -->
                        <span v-if="hoverIndex === index"
                            class="position-absolute top-0 start-0 w-100 h-100 bg-light bg-opacity-100 d-flex align-items-center justify-content-center">
                            <el-button @click="handleDbTableClick(table)" class="w-50" type="primary" size="small">使用
                            </el-button>
                        </span>
                    </div>
                </div>

            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, useAttrs, defineEmits } from "vue";
import _ from "lodash";
import $cmpnt, { ICmpnt, isWidget } from "xcore/cmpnt";
import { Plus, Back } from "@element-plus/icons-vue";
import $data from "xcore/data";

const attrs = useAttrs();

// 控制对话框显示/隐藏
const dialogVisible = ref(false);
const showDb = ref(false);
const currentContainerCmpnt = ref<ICmpnt>();

// 当前激活的标签页
const activeTab = ref("widget");

// 组件列表
const cmpnts = ref<any[]>([]);
const tables = ref<any[]>([]);

// 当前悬停的组件索引
const hoverIndex = ref<number | null>(null);

const handleAddCmpnt = () => {
    dialogVisible.value = true;
    showDb.value = false;
};
// 显示浮动按钮
const showButton = (index: number) => {
    hoverIndex.value = index;
};

// 隐藏浮动按钮
const hideButton = (index: number) => {
    if (hoverIndex.value === index) {
        hoverIndex.value = null;
    }
};

// 标签页切换事件
const tabChange = (val: string) => {
    // 根据标签页类型获取组件列表
    const rootCmpnts = val === "widget" ? $cmpnt.widgets : $cmpnt.containers;

    // 清空当前组件列表
    cmpnts.value = [];

    // 遍历组件列表并添加到 cmpnts 中
    _.forEach(rootCmpnts, (cmpnt: any) => {
        cmpnts.value.push(cmpnt);
    });
};
// 初始化组件列表
tabChange(activeTab.value);

const emit = defineEmits(['change']);

// 组件点击事件处理函数
const handleComponentClick = (cmpnt: any) => {
    let ncmpnt = cmpnt.clone()
    if (isWidget(cmpnt)) {
        $data.func.activate(ncmpnt);
        (attrs.modelValue as any[]).push(ncmpnt);
        emit('change', attrs.modelValue as any[]);
        dialogVisible.value = false;
        return
    }
    currentContainerCmpnt.value = ncmpnt;
    showDb.value = true;
};

const handleDbTableClick = (tb: any) => {
    (currentContainerCmpnt.value?.props as any).DbTable = { id: tb.table_id };
    $data.func.activate(currentContainerCmpnt.value as ICmpnt);
    (attrs.modelValue as any[]).push(currentContainerCmpnt.value);
    emit('change', attrs.modelValue as any[]);
    dialogVisible.value = false;
}


const loadDbTable = () => {
    $data.provider.meta.getAllMetaTable().then((tbs: any[]) => {
        tables.value = tbs
    });
}
loadDbTable()
</script>

<style scoped>
/* 设置弹窗的固定高度 */
.dialog-content {
    height: 500px;
    /* 设置固定高度 */
    overflow-y: auto;
    /* 如果内容超出高度，显示滚动条 */
    overflow-x: hidden;
}

/* 设置组件区域的鼠标样式为可点击样式 */
.component-item {
    cursor: pointer;
    /* 鼠标悬停时显示为手型 */
    transition: background-color 0.2s ease;
    /* 添加过渡效果 */
    padding: 1rem;
    /* 增加内边距 */
}

/* 设置 el-tabs 的高度和右侧竖线样式 */
.tabs-container {
    height: 100%;
    /* 撑满父容器高度 */
}

/* 调整 el-tabs 的内部样式 */
.tabs-container :deep(.el-tabs__header) {
    height: 100%;
    /* 撑满父容器高度 */
    margin-right: 0;
    /* 去除默认的 margin */
}

.tabs-container :deep(.el-tabs__nav-wrap) {
    height: 100%;
    /* 撑满父容器高度 */
}

.tabs-container :deep(.el-tabs__nav-scroll) {
    height: 100%;
    /* 撑满父容器高度 */
}

.tabs-container :deep(.el-tabs__nav) {
    height: 100%;
    /* 撑满父容器高度 */
}
</style>